<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <title></title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      #divbox {
         height: 500px;
         ;
         width: 500px;
         background-color: aquamarine;
      }

      #pbox {
         height: 300px;
         ;
         width: 300px;
         background-color: pink;
      }

      #spanbox {
         display: inline-block;
         height: 100px;
         ;
         width: 100px;
         background-color: blue;
      }
   </style>
</head>

<body>
   事件修饰符
   .stop:阻止事件冒泡**
   .prevent 阻止事件默认行为** 如 contextmenu 右键单击出菜单
   .capture 捕获阶段执行事件（事件 由外向里 触发）
   .once 事件只会执行1次
   .passive 不阻止事件默认行为
   .self 只是触发自己，不包含子元素

   <div id="app">
      <div id="divbox" @click="divshow">
         <p id="pbox" @click.stop="pshow">
            <span id="spanbox" @click="spanshow"></span>
         </p>
      </div>

      <h1 @contextmenu.prevent="show">1111</h1>
      <h1 @contextmenu.once="show">2222</h1>
      <h1 @click.self="showa">
         3333
         <span>wddw</span>
         <i>取2424</i>
      </h1>
   </div>
   <script>
      var vm = new Vue({
         el: "#app",
         methods: {
            divshow() {
               alert("div")
            },
            pshow() {
               alert("p")
            },
            spanshow() {
               alert("span")
            },
            show() {
               console.log("右键单击出菜单");
            },
            showa() {
               console.log("33333");
            }
         }
      })
   </script>
</body>

</html>